箭頭函式不同於一般傳統函式，可以帶來更直觀更簡潔的寫法。

箭頭函式結構:

傳統函式如下:

const Fn = function (){
    return `Hi`;
}

而箭頭函式的結構如下:

const arrFn = () => {
    return `Hi`;
}

除了省略了關鍵字 function 之外，還有一個更關鍵的 => 箭頭。

帶有參數時候的差異性:

傳統函式如下:

const Fn = function (name){
    return name;
}

箭頭函式如下:

const arrFn = (name) => {
    return name;
}

可以看的出來箭頭函式的參數是放在 () 內的
而在只有一個參數時，還可以更精簡的縮寫如下:

const arrFn = name => {
    return name;
}

可以直接省略 ()，這是在僅有一個參數的情況下才可以省略，兩個以上的參數時，不能省略
這樣就結束了嗎? 當然還沒!
當要直接 return 一個值的時候，還可以更精簡:

const arrFn = name => name;

除了省略了 {} 還直接省略了關鍵字 return

到這裡已經是嘆為觀止了 !!!

但跟傳統函式還有其他的不同之處 ~~

箭頭函式沒有 arguments 參數

傳統函式如下:

const nums = function (){
    console.log(arguments);
}

nums(10,20,30);

在傳統函式時，我們可以使用 arguments 參數，把帶入的值一一取出來，而 arguments 是一個類陣列。
箭頭函式如果使用 arguments 參數時，會直接跳錯，這個時候想做到一樣的結果，就可以使用其餘參數，而且帶出來的值，不會是類陣列，而是純陣列:

const nums = (...arg) => {
    console.log(arg)
}

nums(10,20,30);

this 的差異性

箭頭函式跟傳統函式，莫過於 this 的指向，看下面的例子:

var myName = '全域';
var person = {
    myName: '小明',
    callName: function(){
        console.log(this.myName);  // 小明
        setTimeout(function(){
            console.log(this.myName); // 全域
        },10);
    }
};

person.callName();

在呼叫 person 物件的 callName function 的時候，this 的指向是物件本身，但在裡面還有一個 setTimeout 的 callBack function 這時候 this 的指向就會是全域環境
如果把 setTimeout 改成箭頭函式:

var person = {
    myName: '小明',
    callName: function(){
        console.log(this.myName);  // 小明
        setTimeout(() => {
            console.log(this.myName); // 小明
        },10);
    }
};

這時候 this 的指向都會是小明，這是因為箭頭函式沒有自己的 this 所以只能向外面一層去尋找
同理可證，如果把 callName 也改成箭頭函式:

var person = {
    myName: '小明',
    callName: () => {
        console.log(this.myName);  // 全域
        setTimeout(() => {
            console.log(this.myName); // 全域
        },10);
    }
};

這時候呼叫 callName function，this 的指向就會是全域，setTimeout 隨著外層的 this 指向改變，也只能指向全域。

2020/06/25 新增:

箭頭函式回傳物件

傳統函式回傳物件:

const Fn = function (){
    return {
        num: 1
    }
};

此時一樣的模式在箭頭函式:

const arrFn = () => { num: 1};

這時候會跳錯，箭頭函式並不能用這樣的方式直接回傳物件，若真的要回傳一個物件格式，務必如下:

const arrFn = () => ({ num: 1 });

記得用 () 包起來

箭頭函式搭配判斷式

傳統函式搭配判斷式:

let num = 0;

const numFn = num || function(){
    return 1;
}

這時候呼叫 numFn 是會回傳 1
如果改成箭頭函式:

const arrFn = num || () => 1

這時候就會跳錯了，但真的也想回傳這個箭頭函式，也請用 () 包起來

const arrFn = num || (() => 1)